<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>伟大的Bootstrap 3</title>
<link href="css/bootstrap.css" rel="stylesheet">
<style>
.bg-color {
	background: rgba(238,243,250,1);
}
.child-bg-color {
	background: rgba(255,255,255,1);
	padding: 1.5em 0;
	border-radius: 5px;
}
.box-border {
	border: 1px solid;
}
.main {
	margin-top: 4%;
	margin-bottom: 4%;
}
.search {
	position: absolute;
	left: 5px;
	top: 5px;
	z-index: 999;
}
.img-line {
	margin-bottom: 10px;
}
.em-inline{
	display:inline-block;
	padding-right:20px;
	}
@media (max-width: 768px) {
	.sm-margin-top{
		margin-top:20px;
		}
		.presonal-md {
	padding: 0 30px;
}
.info-md {
	float: left;
	padding-right: 40px;
}
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
}
@media (min-width: 768px) and (max-width:1200px) {
.presonal-md {
	padding: 0 30px;
}
.info-md {
	float: left;
	padding-right: 40px;
}
.md-h3 {
	margin-top: 0;
}
}
@media (min-width: @screen-lg-min) {
}
</style>
</head>

<body class="bg-color">
<main class="container main" role="main">
  <div class="row"> 
    <!-- presonal info start-->
    <div class="presonal-md">
      <div class="col-md-12 col-lg-3 child-bg-color" style="margin-bottom:20px;">
        <div class="col-lg-12">
          <div class=" col-sm-4 col-md-4 col-lg-12"> <img src="images/heard.png" alt="头像" width="100%" height="auto" /> </div>
          <div class=" col-sm-8 col-md-8 col-lg-12">
            <h3 class="md-h3">ETIOLATE</h3>
            <p>A smart and minimalistic grid layout Tumblr theme made for any typpe of Tumblr blogger.</p>
            <div class="info-md"><strong>Archive</strong></div>
            <div class="info-md"><strong>Random</strong></div>
            <div class="info-md"><strong>RSS</strong></div>
            <div class="clearfix"></div>
            <br/>
            <div class="col-lg-12 " style="margin:0 -15px 20px -15px;"> <span class=" col-lg-4 glyphicon glyphicon-calendar" style="margin:0 0 0 -15px;" title="日历"> </span> <span class=" col-lg-4 glyphicon glyphicon-hdd" title="网盘"> </span> <span class=" col-lg-4 glyphicon glyphicon-fullscreen" title="最大化"> </span> </div>
            <div class="col-lg-12" style="position:relative;"> <span class="glyphicon glyphicon-search search"> </span>
              <input type="text" style=" margin:0 -15px;border:0; text-indent:10px;" class=" col-sm-12 col-md-12 col-lg-12 bg-color"  placeholder="搜索" />
            </div>
            <div class="clearfix"></div>
            <br/>
            <div>
              <p><strong>Tweets</strong></p>
              <a href="mailto:#" >@ibeckman671</a>
              <p>http://t.co/RKFKVifvmf</p>
              <p>UltraGram - a grid based Tumblr theme with three post page layouts - http://tco/CsXXbQtD1Ho</p>
              <p>UltraFolio - a portfolio Tumblr theme - pttp://t.co./Z867CvlJ2r</p>
            </div>
            <div class=" visible-lg">
              <p><strong>Instagram Shots</strong></p>
              <div class="row">
                <div class="col-lg-6 img-circle img-line"><img src="images/ad-img_02.png" alt="1" /></div>
                <div class="col-lg-6 img-circle img-line"><img src="images/ad-img_04.png" alt="1" /></div>
                <div class="col-lg-6 img-circle img-line"><img src="images/ad-img_07.png" alt="1" /></div>
                <div class="col-lg-6 img-circle img-line"><img src="images/ad-img_08.png" alt="1" /></div>
              </div>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
    <!-- presonal info end && main start-->
    <div class="col-lg-9"> 
      <!-- main-left start-->
      <div class=" col-sm-6 col-md-6 col-lg-6">
        <div class="child-bg-color col-lg-12"> <img src="images/img-01.png" width="100%" height="auto" alt="photo"/>
          <div class="col-lg-12" style="margin-top:20px;">
            <p>(Soure:linxspiration)</p>
            <p><small><em class="em-inline">#interiors</em><em class="em-inline">#minimal</em><em class="em-inline">#style</em><em class="em-inline">#luxury</em></small></p>
            <p><small><strong>1 week ago    442 notes</strong></small><span class="pull-right em-inline"><span class=" glyphicon glyphicon-heart glyphicon-resize-small"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span class=" glyphicon glyphicon-bullhorn glyphicon-resize-small"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span class=" glyphicon glyphicon-flag glyphicon-resize-small"></span></span></p>
           <div class="clearfix"></div>
          </div>
        </div>
        <div class="child-bg-color col-lg-12" style="margin-top:20px;"> <img src="images/img-02.png" width="100%" height="auto" alt="home" />
          <div class="col-lg-12"> <br>
            <p>Ultrasupplytheme:</p>
            <blockquote>
              <h4>What's In My Bag?</h4>
              <p><small>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vivamus sagittis lacus vel augue laoreet rutrum fauclibus dolor auctor. Duis mollis, set non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</small></p>
            </blockquote>
            <p><small><em class="em-inline">#interiors</em><em class="em-inline">#minimal</em><em class="em-inline">#style</em class="em-inline"><em>#luxury</em></small></p>
            <p><small><strong>1 week ago 442 notes</strong></small><span class="pull-right"><span class=" glyphicon glyphicon-heart glyphicon-resize-small"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span class=" glyphicon glyphicon-bullhorn glyphicon-resize-small"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span class=" glyphicon glyphicon-flag glyphicon-resize-small"></span></span></p>
           <div class="clearfix"></div>
          </div>
        </div>
      </div>
      
      <!-- main-left end && main-right start-->
      <div class="col-sm-6 col-md-6 col-lg-6">
        <div class="child-bg-color col-lg-12 sm-margin-top"> <img src="images/img-03.png" width="100%" height="auto" alt="photo"/>
          <div class="col-lg-12" style="margin-top:20px;">
            <p>(Soure:linxspiration)</p>
            <p><small><em class="em-inline">#interiors</em><em class="em-inline">#minimal</em><em class="em-inline">#style</em><em class="em-inline">#luxury</em></small></p>
            <p><small><strong>1 week ago    442 notes</strong></small><span class="pull-right"><span class=" glyphicon glyphicon-heart glyphicon-resize-small"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span class=" glyphicon glyphicon-bullhorn glyphicon-resize-small"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span class=" glyphicon glyphicon-flag glyphicon-resize-small"></span></span></p>
           <div class="clearfix"></div>
          </div>
        </div>
        <div class="child-bg-color col-lg-12" style="margin-top:20px;"> <img src="images/img-02.png" width="100%" height="auto" alt="home" />
          <div class="col-lg-12"> <br>
            <i>It's not the length of life/ But hte depth of life.</i>
            <p>- Ralph Emerson</p>
            <p><small><em class="em-inline">#interiors</em><em class="em-inline">#minimal</em><em class="em-inline">#style</em><em class="em-inline">#luxury</em></small></p>
            <p><small><strong>1 week ago 442 notes</strong></small><span class="pull-right"><span class=" glyphicon glyphicon-heart glyphicon-resize-small"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span class=" glyphicon glyphicon-bullhorn glyphicon-resize-small"></span>&nbsp;&nbsp;&nbsp;&nbsp;<span class=" glyphicon glyphicon-flag glyphicon-resize-small"></span></span></p>
          <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <!-- mian-right end--> 
    </div>
    <!-- main end--> 
  </div>
  <br />
  <br />
  <br />
  <div class="container">
    <div class="row">
      <div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12" style="border-top:1px dashed #aaa; color:#666;text-align:center; padding-top:30px;">
        <p><em>这是一个关于<a href="http://www.bootcss.com/">Bootstrap 3</a>的展示</em></p>
        <p><em>感谢<a href="http://dribbble.com/shots/1454695-Etiolate-Tumblr-Theme?list=show">http://dribbble.com/</a>，因为页面风格来自于此</em></p>
        <p><em class="pull-right">----代码：shimengwen</em></p>
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
</main>
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.js"></script>
</body>
</html>
